/**
 * Created by DELL on 2017/6/7.
 */


import React  from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    Image,
    PixelRatio,
    TouchableHighlight,
    TouchableOpacity,

} from 'react-native';

import BaseComponent, {base,AppIndictor} from '../../base/Base' ;

let {
    N019_USERS$_VOICE,// 意见反馈

} = base.requests;


let {
    KEY_PHONE,
} = base.fields;


export default class Feedback extends BaseComponent {
    static navigationOptions = {
        title: '反馈',//navigation 的默认设置属性 标题
    }

    constructor(props) {
        super(props);
        this.state = {
            phoneNumber: '',
            Contents: '',//内容
            showIndictor : false,
        }
    }

    componentWillMount(){
        //本地获取 电话
        base.Store.get(KEY_PHONE)
            .then(phone => {
                this.setState({phoneNumber: phone})
            });


    }



    //提交
    _submitfeed() {

        var phoneNumber = this.state.phoneNumber;
        var Contents = this.state.Contents;

        //检查录入值
        if( !(phoneNumber&& phoneNumber.length===11)){
            base.toastShort("请输入正确的手机号码");
            return;
        }

        if(! (Contents&& Contents.length >= 10 && Contents.length <=1000 )){
            base.toastShort("字数要求为10-1000");
            return;
        }


        let params = {};
        params.phoneNumber = phoneNumber;
        params.Contents = Contents;

        this.setState({showIndictor: true});


        base.network.getUipData(N019_USERS$_VOICE, params,
            (successData) => {
                 this.setState({showIndictor: false});

                console.log(JSON.stringify(successData));
                base.toastShort('提交成功');
                // 提示 ，2s  后退出 此页面

            },
            (error) => {
                this.setState({showIndictor: false})
                base.toastShort('提交失败：' + error);


            });

    }


    render(){

        return (

            <View style={[base.styles.container]}>


                {/*加载框*/}
                <AppIndictor
                    modalVisible={this.state.showIndictor}
                    size={'large'}
                    color={'#ff6138'}
                />


                    <TextInput
                        underlineColorAndroid={'transparent'}
                        keyboardType='default'
                        clearButtonMode='while-editing'
                        multiline={true}

                        style={styles.input1}
                        placeholder="请留下您的宝贵意见和建议，我们将努力改进"
                        placeholderTextColor={'#808080'}
                        onChangeText={(text) => this.setState({Contents: text})}
                        value={this.state.Contents}/>



                <TextInput
                    underlineColorAndroid={'transparent'}
                    keyboardType='numeric'
                    clearButtonMode='while-editing'
                    multiline={false}
                    maxLength={11}
                    style={styles.input2}
                    placeholder="请输入11位手机号"
                    placeholderTextColor={'#808080'}
                    onChangeText={(text) => this.setState({phoneNumber: text})}
                    value={this.state.phoneNumber}/>

                <TouchableOpacity style={[styles.btn, base.styles.marginTop30, {
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                }]} onPress={this._submitfeed.bind(this)}>
                    <Text style={{color: '#fff', fontSize: 16}}>提交反馈</Text>
                </TouchableOpacity>


            </View>

        );


    }
}



const styles = StyleSheet.create({

    input1: {
        flexDirection:'column',
        justifyContent:'flex-start',
        alignItems:'flex-start',
        //borderColor:'transparent',
        //borderColor:'#f5f5f5',
        marginTop:10,
        width: '96%',
        height: 200,
        backgroundColor:'#f5f5f5',
        textAlignVertical:'top'

    },
    input2: {
        //borderColor:'white',
        marginTop:20,
        width: '96%',
        height: 40,
        backgroundColor:'white'
    },

    btn: {
        //padding: 10,
        backgroundColor: 'cadetblue',
        height: 50,
        width: '90%',
        justifyContent: 'center',
        borderRadius:4,


    },


});